<template>
  <div class="equipmentList">
    <filterPanel filterName="SEquipmentListFilter" filterTitle="设备查询" :filterList="filterData"
                 @filterChange="filterChange"></filterPanel>
    <tablePanel tableName="SEquipmentListTable" :tableLoading="loading" tableTitle="设备列表" :tableList="tableList"
                :tableData="tableData" :total="total" :currentPage="form.page_start" :pageSize="form.page_size"
                @sizeChange="sizeChange" @pageChange="pageChange" @tableClick="tableClick">
      <zy-button type="primary" @click="tableClick('', 'add')">新增</zy-button>
    </tablePanel>
    <zyModel :show="showModel" :title="modelTitle" @submit="submitEquipment" @close="closeModel">
      <div class="addEquipment">
        <div class="addItem">
          <div class="addItemTitle" :class="{'required':type!=='look'}">设备名称：</div>
          <div class="addItemContent" v-if="type!=='look'">
            <zy-input v-model="equipmentInfo.equipment_name"></zy-input>
          </div>
          <div class="addItemContent" v-else>{{equipmentInfo.equipment_name}}</div>
        </div>
        <div class="addItem">
          <div class="addItemTitle" :class="{'required':type!=='look'}">设备型号：</div>
          <div class="addItemContent" v-if="type!=='look'">
            <zy-input v-model="equipmentInfo.equipment_xinghao"></zy-input>
          </div>
          <div class="addItemContent" v-else>{{equipmentInfo.equipment_xinghao}}</div>
        </div>
        <div class="addItem">
          <div class="addItemTitle" :class="{'required':type!=='look'}">IP地址：</div>
          <div class="addItemContent" v-if="type!=='look'">
            <zy-input v-model="equipmentInfo.ip"></zy-input>
          </div>
          <div class="addItemContent" v-else>{{equipmentInfo.ip}}</div>
        </div>
      </div>
    </zyModel>
  </div>
</template>

<script>
	export default {
		name: "SEquipmentList",
		props: {},
		data() {
			return {
				filterData: [
					{
						title: '设备名称',
						name: 'equipment_name',
						type: 'input',
						value: '',
						isShow: true,
						isSelected: true
					},
					{
						title: '设备型号',
						name: 'equipment_xinghao',
						type: 'input',
						value: '',
						isShow: true,
						isSelected: true
					},
					{
						title: 'IP地址',
						name: 'ip',
						type: 'input',
						value: '',
						isShow: true,
						isSelected: true
					},
					{
						title: '创建时间',
						name: 'time',
						type: 'date',
						value: [],
						isShow: true,
						isSelected: true
					},
				],
				form: {
					equipment_name: "",
					equipment_xinghao: "",
					ip: "",
					time: [],
					page_start: 1,
					page_size: 10
				},
				loading: false,
				tableList: [
					{
						title: '设备名称',
						name: 'equipment_name',
						isShow: true,
						isSelected: true
					},
					{
						title: '设备型号',
						name: 'equipment_xinghao',
						isShow: true,
						isSelected: true
					},
					{
						title: 'IP地址',
						name: 'ip',
						isShow: true,
						isSelected: true
					},
					{
						title: '创建时间',
						width: 160,
						name: 'create_time',
						isShow: true,
						isSelected: true
					},
					{
						title: '操作',
						width: 120,
						name: 'handler',
						fixed: 'right',
						btns: [
							{
								type: 'look',
								name: '查看'
							},
							{
								type: 'edit',
								name: '修改'
							},
						],
						isSelected: true
					}
				],
				tableData: [],
				total: 0,
				showModel: false,
				type: '',
				modelTitle: '',
				equipmentInfo: {
					equipment_name: '',
					equipment_xinghao: '',
					ip: '',
					equipment_id: ''
        }
			};
		},
		computed: {
			postData() {
				let data = {
					...this.form,
					pagination: {
						page_start: this.form.page_start,
						page_size: this.form.page_size
					}
				};
				if (this.form.time && this.form.time.length > 0) {
					data.start_created_time = this.form.time[0] / 1000;
					data.end_created_time = this.form.time[1] / 1000;
				}
				delete data.time;
				return data;
			},
		},
		watch: {},
		components: {},
		methods: {
			sizeChange(val) {
				this.form.page_size = val;
				this.getData()
			},
			pageChange(val) {
				this.form.page_start = val;
				this.getData()
			},
			filterChange(data) {
				this.form = {...this.form, ...data};
				this.getData();
			},
			getData() {
				this.loading = true;
				this.$axios.post(this.$api.equipmentList, this.postData).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.tableData = data.list.filter(item => {
							item.look = true;
							item.edit = true;
							return item;
						});
						this.total = data.pagination.total_count || 0;
					} else {
						this.total = 0;
							this.tableData = [];
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			tableClick(data, type) {
				switch (type) {
					case 'add':
						this.modelTitle = '新增设备';
						break;
					case 'look':
						this.modelTitle = '查看设备';
						this.getEquipmentInfo(data.equipment_id);
						break;
					case 'edit':
						this.modelTitle = '修改设备';
						this.getEquipmentInfo(data.equipment_id);
						break;
				}
				this.type = type;
				this.showModel = true;
			},
			getEquipmentInfo(equipment_id) {
				this.$axios.post(this.$api.getEequipment, {
					equipment_id: equipment_id
        }).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.equipmentInfo = {...data};
					} else {
						this.$message.error(msg);
						this.tableData = [];
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			submitEquipment(){
				if(!this.equipmentInfo.equipment_name){
					return this.$message.error('请输入设备名称');
        }
				if(!this.equipmentInfo.equipment_xinghao){
					return this.$message.error('请输入设备型号');
				}
				if(!this.equipmentInfo.ip){
					return this.$message.error('请输入设备IP');
				}
				this.$axios.post(this.$api.editEequipment, {
					...this.equipmentInfo
        }).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.closeModel();
						this.getData();
					} else {
						this.$message.error(msg);
						this.tableData = [];
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
      },
			closeModel(){
				this.showModel = false;
      }
		},
		mounted() {
			this.getData();
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/sorting/equipment/equipmentList/index.less">

</style>
